<template>
  <div class="com-file">
    <right-click :items="foldItems" @action="foldAction($event)">
      <div class="folder" :class="{active: folderActive}" @click="openFolder">
        <i v-if="isOpen" class="el-icon-minus icon"></i>
        <i v-else class="el-icon-plus icon"></i>
        <i class="el-icon-folder-opened icon"></i>
        <div class="title">{{ title }}</div>
      </div>
    </right-click>
    <div v-if="isOpen" class="file-list">
      <right-click
        v-for="v in files"
        :key="v.devtempid"
        :items="fileItems"
        :class="{active: activeId === v.devtempid}"
        class="file"
        @action="fileAction($event, v)"
      >
        <div class="file-item title" @click="$emit('selectTpl', v)">
          <i class="el-icon-tickets icon"></i>
          <span>{{ v.devtempname }}</span>
        </div>
      </right-click>
    </div>
  </div>
</template>

<script>
import RightClick from "@/components/RightClick";
export default {
  components: {
    RightClick
  },
  props: {
    title: {
      type: String,
      default: "未命名"
    },
    files: {
      type: Array,
      default() {
        return [];
      }
    },
    folder: {
      type: Object,
      required: true
    },
    activeId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      isOpen:
        this.folder.list.map(e => e.devtempid).indexOf(this.activeId) > -1,
      foldItems: [
        {
          id: 1,
          template: `<i class="el-icon-circle-plus-outline icon"></i>
          <span>添加模板</span>`,
          name: "添加模板",
          action: "add"
        },
        {
          id: 2,
          name: "编辑",
          action: "edit",
          template: `<i class="el-icon-edit-outline icon"></i>
          <span>编辑组</span>`
        }
        // {
        //   id: 3,
        //   name: "删除组",
        //   action: "delete",
        //   template: `<img src="${require("@/assets/icon/icon_td_delete.png")}" alt="edit">
        //   <span>删除组</span>`
        // }
      ],
      fileItems: [
        // {
        //   id: 1,
        //   template: `<img src="${require("@/assets/icon/icon_sb_add.png")}" alt="+">
        //   <span>添加模版</span>`,
        //   name: "添加模版",
        //   action: "add"
        // },
        {
          id: 2,
          name: "编辑",
          action: "edit",
          template: `<i class="el-icon-edit-outline icon"></i>
          <span>编辑模版</span>`
        }
        // {
        //   id: 3,
        //   name: "删除组",
        //   action: "delete",
        //   template: `<img src="${require("@/assets/icon/icon_sb_delete.png")}" alt="edit">
        //   <span>删除模版</span>`
        // }
      ]
    };
  },
  computed: {
    folderActive() {
      if (!this.activeId) {
        return false;
      }
      return this.folder.list.map(e => e.devtempid).indexOf(this.activeId) > -1;
    }
  },
  methods: {
    openFolder() {
      this.isOpen = !this.isOpen;
    },
    foldAction(e) {
      const p = { action: e.action, ...this.folder };
      this.$emit("folderAction", p);
    },
    fileAction(e, f) {
      const p = { action: e.action, ...f };
      this.$emit("fileAction", p);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.com-file {
  color: #7c8ca5;
}
.folder {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 16px;
  padding: 0 6px;
  cursor: pointer;
  &.active {
    color: #fff;
  }
  & > span {
    margin-left: 8px;
  }
  & > img {
    height: 14px;
    margin-right: 2px;
    cursor: pointer;
  }
}
.title {
  overflow: hidden;
  @include text-one-line;
}
/deep/ .icon {
  margin-right: 6px;
}
.file {
  height: 24px;
  line-height: 24px;
  text-align: left;
  padding: 0 30px;
  cursor: pointer;
  &.active {
    color: #fff;
  }
}
</style>
